<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="./css/bootstrap.css">
  <style>
    .card-deck{
      /*background: #000000;*/
      /*margin-bottom: 2rem;*/
    }
   /* .row div{
      background: #399;
      border:1px solid #000000;
    }*/
  .carousel{
    background: #399;
    /*height:10%;*/
    max-height:20rem;
  }
    .carousel .carousel-inner .carousel-item{
      max-height:20rem;
    }
    .card-col{
      margin-top: 1rem;
    }
    .card-columns .card{
      border-radius: 0;
    }
  </style>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark sticky-top">
  <a class="navbar-brand" href="#">LOGO</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">新闻</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">用户</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">购物车</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          社区
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">VUE</a>
          <a class="dropdown-item" href="#">REACT</a>
          <a class="dropdown-item" href="#">ANGULAR</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">API</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">VIP</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="搜索">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
    </form>
  </div>
</nav>
<!--carousel 轮播图 -->
<div id="carouselExampleIndicators" class="carousel slide " data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="./images/chrome-big.jpg" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
          <h3>标题1</h3>
          <p>文字</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="./images/opera-big.jpg" alt="Second slide">
        <div class="carousel-caption d-none d-md-block">
          <h3>标题2</h3>
          <p>文字</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

<!--卡列-->
<div class="container card-col">
  <div class="card-columns">
    <div class="card bg-dark text-white">
      <div class="card-body">
        这是卡片主体
      </div>
    </div>
    <div class="card bg-danger">
      <div class="card-body">
        <h4 class="card-title">卡标题</h4>
        <h6 class="card-subtitle mb-2">卡副标</h6>
        <p class="card-text">卡片文本</p>
        <a href="#" class="card-link text-white">卡片链接</a>
      </div>
    </div>
    <div class="card bg-info">
      <img src="https://v4.bootcss.com/assets/img/bootstrap-stack.png" alt="" class="card-img-top">
      <div class="card-body">
        <p class="card-text">卡文本</p>
      </div>
    </div>
    <div class="card bg-light">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>
    </div>
    <div class="card bg-primary">
      <img class="card-img-top" src="https://v4.bootcss.com/assets/img/bootstrap-stack.png">
      <div class="card-body">
        <h4 class="card-title">卡标题</h4>
        <p class="card-text">卡内容</p>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">列表组1</li>
        <li class="list-group-item">列表组1</li>
        <li class="list-group-item">列表组1</li>
      </ul>
      <div class="card-body">
        <a href="#" class="card-link text-light">关于</a>
        <a href="#" class="card-link text-danger">查看详情</a>
      </div>
    </div>
    <div class="card bg-secondary">
      <h3 class="card-header">页眉</h3>
      <div class="card-body">
        <h4 class="card-title text-light">卡头</h4>
        <p class="card-text">卡文本</p>
        <a href="#" class="btn btn-primary">链接按钮</a>
      </div>
      <h6 class="card-footer">页脚</h6>
    </div>
    <div class="card bg-success">
      <div class="card-header">
        引用
      </div>
      <div class="card-body">
        <blockquote class="blockquote">
          <p>性格决定命运，气度影响格局</p>
          <footer class="blockquote-footer">九叔</footer>
        </blockquote>
      </div>
    </div>
    <div class="card bg-warning">
      <div class="card-body">
        <h4 class="card-title">卡标题</h4>
        <p class="card-text">卡内容</p>
      </div>
      <img class="card-img-top" src="https://v4.bootcss.com/assets/img/bootstrap-stack.png">
    </div>
    <div class="card bg-white">
      <img class="card-img-top" src="https://v4.bootcss.com/assets/img/bootstrap-stack.png">
      <div class="card-img-overlay">
        <h4 class="card-title">卡标题</h4>
        <p class="card-text">卡内容</p>
      </div>
    </div>
  </div>
</div>

<!--翻页-->
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <!--<ul class="pagination justify-content-end">-->
    <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
  </ul>
</nav>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="./js/bootstrap.js"></script>

</body>
</html>